<template>

  <div class="container">
    <Category title="美食" :listData="foods">
      <h1 slot="demo1">美食分类独特的插槽1</h1>
      <h1 slot="demo2">美食分类独特的插槽2</h1>
    </Category>
    <Category title="游戏" :listData="games">
      <!--
        这种v-slot 是vue2推出的新写法
        但是只能作用于template标签
      -->
      <template v-slot:demo2>
        <h1 >游戏分类独特的插槽2</h1>
      </template>
    </Category>
    <Category title="电影" :listData="films"/> 

    <Category1 title="电影1">
      <!-- 这里使用插槽传递值必须用template来接受
      且写上scope属性，对于的值可以随意定义，他将会
      子组件的slot上的所有属性打包成对象传递给他，如果你只希望
      获得某个属性，也支持解构赋值
      -->
      <template slot="demo3" slot-scope="obj">
        {{obj}}
        <li v-for="(d,index) of obj.cData" :key="index">
                {{d}}
        </li>
      </template>
      
    </Category1> 

    <Category1 title="电影2">
      <template slot-scope="{cData}">
        <li v-for="(d,index) of cData" :key="index">
                {{d}}
        </li>
      </template>
    </Category1>
  </div>

</template>

<script>
import Category from './components/Category.vue'
import Category1 from './components/Category1.vue'
export default {
    name:"App",
    components:{Category,Category1},
    data(){
      return {
        foods:['火锅','烧烤','小龙虾','牛排'],
        games:['红色警戒','穿越火线','超级玛丽'],
        films:['教父','拆弹专家']
      }
    }
}
</script>

<style scoped>
 
  .container{
    display: flex;
    justify-content: space-around;
  }
</style>